<template>
	<div class="table-wrapper">
		<el-table
			:data="state.tableData.data"
			:height="tableHeight"
			v-loading="state.tableData.loading"
			style="width: 100%"
			row-key="id"
			default-expand-all
		>
			<el-table-column type="expand">
				<template #default="props">
					<el-table :data="props.row.goodsVOS" :show-header="false">
						<!-- <el-table-column label="商品名称" prop="title"></el-table-column> -->
						<el-table-column label="商品信息" width="500">
							<template #default="scope">
								<div class="flex goods-item">
									<div style="width: 80px; height: 80px">
										<el-image :src="STATIC_URL + scope.row.image" />
									</div>
									<div class="right ml15">
										<div class="goods-title">
											{{ scope.row.title }}
										</div>
										<div class="goods-sku-text">
											<span v-for="(sku, index) in scope.row.skus" :key="sku" :class="{ ml5: index != 0 }"> {{ sku }} </span>
										</div>
										<div class="flex">
											<div class="goods-price ml5">¥{{ scope.row.price }}</div>
											<div class="goods-num ml12">x{{ scope.row.quantity }}</div>
										</div>
									</div>
								</div>
							</template>
						</el-table-column>

						<el-table-column width="100"></el-table-column>
						<el-table-column width="100"></el-table-column>
						<el-table-column width="150"></el-table-column>
						<el-table-column width="200"></el-table-column>
						<el-table-column width="200"></el-table-column>
						<el-table-column label="操作" show-overflow-tooltip>
							<template #default="scope">
								<el-button size="small" text type="primary">详情</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-table-column>
			<el-table-column prop="orderSn" label="订单号码" show-overflow-tooltip></el-table-column>
			<!-- <el-table-column prop="name" label="售后状态" show-overflow-tooltip></el-table-column> -->
			<el-table-column prop="nickname" label="下单用户" show-overflow-tooltip></el-table-column>
			<el-table-column prop="address" label="收货地址" show-overflow-tooltip width="300">
				<template #default="scope">
					<div>
						<div class="user-adress flex">
							<div>{{ scope.row.province }}-</div>
							<div>{{ scope.row.city }}-</div>
							<div>{{ scope.row.country }}</div>
						</div>
						<div>{{ scope.row.address }}</div>
						<div class="user-nickname flex">
							<div>手机号：{{ scope.row.mobile }}</div>
						</div>
						<div class="user-nickname flex">
							<div>收货人：{{ scope.row.consignee }}</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="orderStatus" label="订单状态" show-overflow-tooltip>
				<template #default="scope">
					<span>
						<el-tag v-if="scope.row.orderStatus == 0" type="info">待付款</el-tag>
						<el-tag v-else-if="scope.row.orderStatus == 1" type="success">待发货</el-tag>
						<el-tag v-else-if="scope.row.orderStatus == 2" type="warning">已发货</el-tag>
						<el-tag v-else-if="scope.row.orderStatus == 3" type="warning">待评价</el-tag>
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="支付方式" show-overflow-tooltip></el-table-column>
			<el-table-column prop="createTime" label="下单时间" show-overflow-tooltip></el-table-column>
			<el-table-column prop="payFee" label="支付金额" show-overflow-tooltip>
				<template #default="scope">
					<div class="flex flex-content">
						<div class="flex-content-center">
							<span>¥{{ scope.row.payFee }}</span>
						</div>
						<div class="ml15" v-if="scope.row.orderStatus == 0">
							<el-button text type="danger" @click="openUpdatePrice(scope.row.id)">改价</el-button>
						</div>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="操作" show-overflow-tooltip width="200">
				<template #default="scope">
					<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpen('edit', scope.row.id)"
						>修改
					</el-button>
					<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onDetail(scope.row)">详情 </el-button>
					<el-button
						:disabled="scope.row.roleName === '超级管理员'"
						size="small"
						type="warning"
						@click="goodsSend(scope.row)"
						v-if="scope.row.orderStatus == 1"
						>立即发货
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-wrapper">
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:page-sizes="[10, 15, 20, 30, 50, 100]"
				v-model:current-page="state.tableData.paging.currentPage"
				background
				v-model:page-size="state.tableData.paging.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.paging.totalCount"
			>
			</el-pagination>
		</div>
		<OrderDialog ref="OrderDialogRef"></OrderDialog>
		<GoodsSenderDialog ref="GoodsSenderDialogRef" @refreshOrderStatus="refreshStatus"></GoodsSenderDialog>
		<GoodsUpdatePriceDialog ref="GoodsUpdatePriceDialogRef" @refreshOrderStatus="refreshStatus"></GoodsUpdatePriceDialog>
	</div>
</template>

<script setup lang="ts">
import { computed, defineAsyncComponent, reactive, ref } from 'vue';
import { orderApi } from '/@/api/shop/order';
import msg from '/@/utils/messageUtils';
import { STATIC_URL } from '/@/utils/config';

const OrderDialog = defineAsyncComponent(() => import('./Dialog.vue'));
const OrderDialogRef = ref();
const GoodsSenderDialog = defineAsyncComponent(() => import('./GoodsSendDialog.vue'));
const GoodsSenderDialogRef = ref();
const GoodsUpdatePriceDialog = defineAsyncComponent(() => import('./UpdatePriceDialog.vue'));
const GoodsUpdatePriceDialogRef = ref();
const state = reactive({
	isToggle: false,
	search: {
		name: '',
		orderStatus: '',
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		paging: {
			currentPage: 1,
			pageSize: 15,
			totalCount: 0,
			totalPages: 0,
		},
	},
});

const tableHeight = computed(() => {
	return 'calc(100vh - 280px)'; // 精确计算后的固定值
});
const onHandleSizeChange = (pageSize: number) => {
	state.tableData.paging.pageSize = pageSize;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (currentPage: number) => {
	state.tableData.paging.currentPage = currentPage;
	getTableData();
};
const getTableData = async () => {
	try {
		const { data } = await orderApi().search({
			offset: (state.tableData.paging.currentPage - 1) * state.tableData.paging.pageSize,
			limit: state.tableData.paging.pageSize,
			orderStatus: state.search.orderStatus,
		});

		console.log('result: ', data);
		state.tableData.data = data.datas;
		state.tableData.paging.currentPage = data.paging.currentPage;
		state.tableData.paging.totalCount = data.paging.totalCount;
	} catch (e) {
		msg().error('查询失败，请稍后重试');
	}
};

const onOpen = (type: string, id: number) => {
	console.log('type: ', type);
	console.log('id: ', id);
};

const openUpdatePrice = (id: string) => {
	GoodsUpdatePriceDialogRef.value.openInit(id);
};

const onDetail = (row: any) => {
	OrderDialogRef.value.onOpenDialog(row.id);
};

const init = (search: OrderQuerySearch) => {
	state.search.orderStatus = search.orderStatus;
	state.tableData.paging.currentPage = 1;
	state.tableData.paging.pageSize = 15;
	getTableData();
};

const goodsSend = (data: any) => {
	GoodsSenderDialogRef.value.openInit(data.id);
};

const refreshStatus = () => {
	console.log('refreshStatus。。。。。。');
	onHandleCurrentChange(1);
};

defineExpose({
	init,
});
</script>

<style scoped lang="scss">
.goods-item .right {
	flex: 1;
	line-height: 14px;
	font-size: 12px;
	font-weight: 400;
	color: #595959;
}

.goods-item .right .goods-title {
	height: 14px;
	line-height: 14px;
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 4px;
}

.goods-item .right .goods-sku-text {
	height: 14px;
	line-height: 14px;
	margin-bottom: 10px;
}

.flex-content-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.table-wrapper {
	display: flex;
	flex-direction: column;
}

.pagination-wrapper {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background: #fff;
	border-top: 1px solid #ebeef5;
	padding-left: 16px;
}
</style>
